<template>
  <div class="table-bar-item" @click="itemClick">
    <!-- 判断是否处于活跃，活跃就变色 -->
    <div v-if="!isactive"><slot name="icon"></slot></div>
    <div v-else><slot name="icon-active"></slot></div>
    <div :style="activeStyle"><slot name="text"></slot></div>
    <!-- 这里放两个具名插槽 空出来 这个Tabbar使用这个组件时 可以在这个插槽里添加两个内容 -->
    <!-- 使用插槽属性很容易被替换掉 最好包裹最外一层div包裹 -->
  </div>
</template>

<script>
export default {
  name:'Tabbaritem',
  props:{
    path:String,
    activecolor:String,
    default:'red'
  },
  data() {
    return {
      // isactive:false
    }
  },
    computed:{
    isactive(){
      // this.$$route.path == item(path)  == true 
     return this.$route.path == this.path
  },
    activeStyle(){
      return this.isactive ? {color:this.activecolor} : {};
    }
   },
  methods: {
    itemClick(){
      this.$router.push(this.path).catch(err=>{err})
    }
  },
}
</script>

<style>
 .table-bar-item{
    /* width: 30px; */
    /* background-color: #ccc; */
    /* align-items: center; */
    /* border: 0.5px #ccc solid; */
    flex:1;
    height: 49px;
    text-align: center;
    font-size: 14px;
  }
  .table-bar-item img {
    width: 24px;
    height: 24px;  
    margin-top: 2px;
    /* vertical-align:middle; */
  }
  /* .active{
    color: red;
  } */
</style>